<template>
  <div class="normal-msg msg-box">
    <div class="sys-avatar" />

    <div class="content common-content">
      <Replay v-if="source.refMessage" :item="source.refMessage" />
      <div class="msg">
        <span class="txt" v-html="source.content" />
        <Time :t="source.msgTime" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Time from '../time.vue'
import Replay from './reply.vue'

type Props = {
  source: any
}

defineProps<Props>()
</script>

<style lang="less" scoped>
@import url('./common.less');

.sys-avatar {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background: url('@/assets/img/chatroom/admin_avatar.png') center center no-repeat;
  background-size: contain;
}

.balance-area {
  position: absolute;
  right: -12px;
  top: 50%;
  padding: 4px 17px;
  transform: translate(100%, -50%);
  background-color: rgba(49, 49, 49, 1);
  box-shadow: 0px 0px 4px 0px rgba(36, 5, 5, 0.25);
  border-radius: 8px;
  z-index: 2;
  text-align: left;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-100%, -50%);
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right: 10px solid rgb(49, 49, 49);
  }
}

.content {
  width: calc(100% - 100px);
  margin-left: 9px;
  background-color: rgba(44, 45, 71, 1);
  color: #fff;

  &::before {
    left: 0;
    top: 10px;
    border-right: 8px solid rgba(44, 45, 71, 1);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    transform: translateX(-100%);
  }

  :deep(a) {
    a {
      color: rgb(0, 114, 220);

      &:active {
        color: rgb(0, 114, 220);
      }

      &:visited {
        color: rgb(0, 114, 220);
      }
    }
  }
}
</style>
